<template>
  <div>
    <el-color-picker v-model="colors.primary" @change="colorChange"></el-color-picker>
  </div>
</template>
<script>
import generateColors from '../../utils/color'
import objectAssign from 'object-assign'
export default {
  name: 'App',
  data() {
    return {
      originalStylesheetCount: -1, // 记录当前已引入style数量
      originalStyle: '', // 获取拿到的.css的字符串
      colors: {
        // 颜色选择器默认颜色值,这个值要和element-variables一样
        primary: '#08B3E9'
      },
      primaryColor: '', // 提交成功后设置默认颜色
      cssUrl: [
        '//unpkg.com/element-ui/lib/theme-chalk/index.css',
        './static/css/index.css'
      ]
    }
  },
  mounted() {
    let that = this
    // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
    this.colors.primary = localStorage.getItem('color') || this.colors.primary// 例如
    this.$store.commit('SET_COLOR', this.colors.primary)
    this.getIndexStyle(this.cssUrl[0])
    setTimeout(function() {
      if (that.originalStyle) {
        return
      } else {
        that.getIndexStyle(that.cssUrl[1])
      }
    }, 2000)
    this.$nextTick(() => {
      // 获取页面一共引入了多少个style 文件
      this.originalStylesheetCount = document.styleSheets.length
    })
  },
  methods: {
    colorChange(e) {
      if (!e) return
      localStorage.setItem('color', e)
      this.primaryColor = this.colors.primary
      this.colors = objectAssign(
        {},
        this.colors,
        generateColors(this.colors.primary)
      )
      this.writeNewStyle()
      this.$store.commit('SET_COLOR', this.colors.primary)
      location.reload()
    },
    writeNewStyle() {
      let cssText = this.originalStyle
      Object.keys(this.colors).forEach(key => {
        cssText = cssText.replace(
          new RegExp('(:|\\s+)' + key, 'g'),
          '$1' + this.colors[key]
        )
      })
      if (this.originalStylesheetCount === document.styleSheets.length) {
        // 如果之前没有插入就插入
        const style = document.createElement('style')
        style.innerText =
                    '.primaryColor{background-color:' + this.colors.primary + '}' + cssText
        document.head.appendChild(style)
      } else {
        // 如果之前有插入就修改
        document.head.lastChild.innerText =
                    '.primaryColor{background-color:' +
                    this.colors.primary +
                    '} ' +
                    cssText
      }
    },
    getIndexStyle(url) {
      let that = this
      var request = new XMLHttpRequest()
      request.open('GET', url)
      request.onreadystatechange = function() {
        if (
          request.readyState === 4 &&
                    (request.status === 200 || request.status === 304)
        ) {
          // 调用本地的如果拿不到会得到html,html是不行的
          if (request.response && !/DOCTYPE/gi.test(request.response)) {
            that.originalStyle = that.getStyleTemplate(request.response)
            that.writeNewStyle()
          } else {
            that.originalStyle = ''
          }
        } else {
          that.originalStyle = ''
        }
      }
      request.send(null)
    },
    getStyleTemplate(data) {
      const colorMap = {
        '#3a8ee6': 'shade-1',
        '#409eff': 'primary',
        '#53a8ff': 'light-1',
        '#66b1ff': 'light-2',
        '#79bbff': 'light-3',
        '#8cc5ff': 'light-4',
        '#a0cfff': 'light-5',
        '#b3d8ff': 'light-6',
        '#c6e2ff': 'light-7',
        '#d9ecff': 'light-8',
        '#ecf5ff': 'light-9'
      }
      Object.keys(colorMap).forEach(key => {
        const value = colorMap[key]
        data = data.replace(new RegExp(key, 'ig'), value)
      })
      return data
    }
  }
}
</script>
